import React, { memo } from "react"
import type { FC, ReactNode } from "react"
import SectionHeaderV2 from "@/components/SectionHeaderV2"
import { hotRadios } from "@/requset/local-data"
import "./index.less"
interface IProps {
	children?: ReactNode
}

const HotAnchor: FC<IProps> = () => {
	return (
		<div className="hotAnchorContainer">
			<SectionHeaderV2 title="热门主播" />
			<div className="anchors">
				{hotRadios.map((item) => {
					return (
						<div className="item" key={item.picUrl}>
							<a href="" className="image">
								<img src={item.picUrl} alt="" />
							</a>
							<div className="info">
								<div className="name">{item.name}</div>
								<div className="position">{item.position}</div>
							</div>
						</div>
					)
				})}
			</div>
		</div>
	)
}

export default memo(HotAnchor)
